<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 文本属性：颜色color 对齐方式text-align 文本装饰text-decoration 文本缩进text-indent 行高line-height-->

<style>
    /* 颜色的三种表示方式：color: red, #ff0000（还可以简写成#f00）, rgb(255, 0, 0); */
    .color {
        color: blue;
    }


    /* text-align: left, right, center 控制文字水平方向的对齐，不光能控制文本对齐, 也能控制图片等元素居中或者靠右 */
    .color {
        text-align: center;
    }

    /* text-decoration:none/overline/unorderline/line-through 文本装饰 */
    /* underline 下划线. */
    /* none 啥都没有. 可以给 a 标签去掉下划线.  */
    /* overline 上划线 */
    /* line-through 删除线 */

    text-decoration #one {
        text-decoration: none;
    }

    .text-decoration #two {
        text-decoration: overline;
    }

    .text-decoration #three {
        text-decoration: underline;
    }

    .text-decoration #four {
        text-decoration: line-through;
    }

    /* text-indent 文本缩进 */
    /* 单位可以使用 px 或者 em.  */
    /* 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.  */
    /* 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了) */
    .text-indent #one {
        text-indent: 2em;
        /* text-indent: -2em; */
    }

    .text-indent #two {
        text-indent: 2px; /*像素点*/
    }

    /* text-height行高 */
    /* 行高 = 上边距 + 下边距 + 文字大小 */
    /* 下面设置 上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px */
    /* 行高也可以取 normal 等值, 这个取决于浏览器的实现. chrome 上 normal 为 21 px*/
    /* 行高等与元素高度, 就可以实现文字居中对齐 */
    .text-height #one {
        line-height: 40px;
        font-size: 16px;
    }
    .text-height #two {
        line-height: 20px;
        font-size: 16px;
    }

</style>

<body>
    <div class="color">这是一句话</div>

    <div class="text-decoration">
        <ul>
            <li id="one">第一项</li>
            <li id="two">第二项</li>
            <li id="three">第三项</li>
            <li id="four">第四项</li>
        </ul>
    </div>

    <div class="text-indent">
        <p id="one">这是第一段话，话有点长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</p>
        <p id="two">这是第二段话</p>
    </div>


    <div class="text-height">
        <p id="one">这是第一段话</p>
        <p id="two">这是第二段话</p>
    </div>

</body>

</html>